import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sainbainu/common/values/colors.dart';
import 'package:sainbainu/view/content_detail/widgets/comment_item.dart';
import 'package:sainbainu/view/content_detail/widgets/separator_line.dart';
import 'package:sainbainu/common/widgets/widget.dart';

import '../index.dart';

typedef LikeTap = void Function(bool flag, int? id);
typedef InputTap = void Function(int? id);
typedef DelTap = void Function(int? id);

class CommentBottomSheet extends GetView<ContentDetailController> {
  final InputTap? onInputTap;
  final LikeTap? onLikeTap;
  final DelTap? onDelTap;
  final UserTap? onUserTap;

  const CommentBottomSheet({
    super.key,
    this.onInputTap,
    this.onLikeTap,
    this.onDelTap,
    this.onUserTap,
  });

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ContentDetailController>(builder: (_) {
      return Scaffold(
        backgroundColor: Colors.transparent,
        resizeToAvoidBottomInset: false, // 防止页面被键盘顶起
        appBar: AppBar(
          title: GetBuilder<ContentDetailController>(
            id: 'replyCommentTotal',
            builder: (_) => Text(
              '${_.state.replyCommentListResponse.total}${'条评论'.tr}',
            ),
          ),
          automaticallyImplyLeading: false,
          // leading: IconButton(
          //   onPressed: () => Get.back(),
          //   icon: const Icon(Icons.close),
          // ),
          // shape: const RoundedRectangleBorder(
          //   borderRadius: BorderRadius.only(
          //     topLeft: Radius.circular(20),
          //     topRight: Radius.circular(20),
          //   ),
          // ),
        ),
        body: Container(
          color: Colors.white,
          child: _buildBody(),
        ),
        bottomNavigationBar: _buildBottom(),
      );
    });
  }

  /// 评论主页面
  Widget _buildBody() {
    return EasyRefresh.builder(
      controller: controller.state.replyCommentRefreshController,
      onLoad: controller.onReplyCommentRichBottom,
      header: const ClassicHeader(
        hitOver: false,
        clamping: true,
      ),
      childBuilder: (context, physics) {
        return CustomScrollView(
          physics: physics,
          slivers: [
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.only(top: 8),
                child: GetBuilder<ContentDetailController>(
                  id: 'currentCommentInfo',
                  builder: (_) => CommentItem(
                    item: _.state.currentCommentInfo!,
                    onPreviewTap: _.handlePreviewImage,
                    onLikeTap: onLikeTap,
                    onUserTap: onUserTap,
                  ),
                ),
              ),
            ),
            const SliverToBoxAdapter(
              child: SeparatorLine(left: 0, right: 0),
            ),
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.only(left: 15, bottom: 10),
                child: Text(
                  '全部回复'.tr,
                  style: const TextStyle(
                    color: AppColors.active,
                    fontSize: 15,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
            GetBuilder<ContentDetailController>(
              id: 'replyCommentList',
              builder: (_) => SliverList.separated(
                itemCount: _.state.replyCommentListResponse.rows.length,
                itemBuilder: (BuildContext context, int index) {
                  var item = _.state.replyCommentListResponse.rows[index];
                  return CommentItem(
                    item: item,
                    showDelIcon: true,
                    onPreviewTap: _.handlePreviewImage,
                    onLikeTap: onLikeTap,
                    onDelTap: onDelTap,
                    onUserTap: onUserTap,
                  );
                },
                separatorBuilder: (context, index) {
                  return const SeparatorLine();
                },
              ),
            ),
          ],
        );
      },
    );
  }

  /// 底部评论输入框
  Widget _buildBottom() {
    return Container(
      color: Colors.white,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 0.5,
            color: AppColors.border,
          ),
          SafeArea(
            top: false,
            bottom: true,
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
              child: CommentInput(
                onTap: () {
                  if (onInputTap != null) {
                    onInputTap!(controller.state.currentCommentInfo?.commentId);
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}
